<template>
	<view class="container">
		<form @submit="formSubmit">
			<view class="" v-if="step=='1'">
				<view class="uni-form-item uni-column gsxz">
					<view class="title">公司性质:</view>
					<radio-group name="state" v-model="form.state" :disabled="disabled">
						<label class="radio-label" >
							<radio class="radiobox" value="1" color="#eb5641" activeBackgroundColor="#eb5641" checked="true"/><text>工厂</text>
						</label>
						<label class="radio-label">
							<radio class="radiobox" value="2" color="#eb5641" activeBackgroundColor="#eb5641"/><text>贸易</text>
						</label>
						<label class="radio-label">
							<radio class="radiobox" value="3" color="#eb5641"  activeBackgroundColor="#eb5641"/><text>代理</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">营业执照名称</view>
					<input class="uni-input" name="name" v-model="form.name" placeholder="请输入" :disabled="disabled"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">法人</view>
					<input class="uni-input" name="corporation" v-model="form.corporation" placeholder="请输入" :disabled="disabled"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">联系方式</view>
					<input class="uni-input" name="mobile" v-model="form.mobile" placeholder="请输入" :disabled="disabled"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">供应商电话</view>
					<input class="uni-input" name="supplier_phone" v-model="form.supplier_phone" placeholder="请输入" :disabled="disabled"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">公司地址</view>
					<view class="address">
						<input class="uni-input uni-input-address" name="address" v-model="address" style="margin-bottom: 20rpx;" placeholder="省--市--区--街道" :disabled="disabled"/>
						<image src="../../static/images/icon_address.png" mode="widthFix" class="icon-address" @click="getAddress"></image>
					</view>
					<textarea class="uni-textarea" name="address_detail"  v-model="form.address_detail" placeholder="小区楼栋/乡村名称" :disabled="disabled"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">公司介绍</view>
					<view class="" style="position: relative;">
						<textarea class="uni-textarea" v-model="form.bio" :maxlength="bioMaxLength" name="bio" placeholder="请输入" @input="bioInput" :disabled="disabled"/>
						<text style="position: absolute;right: 20rpx;bottom: 16rpx;">{{bioLength}}/{{bioMaxLength}}</text>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<view class="uni-form-item uni-column">
					<view class="title">店铺名称</view>
					<input class="uni-input" name="shopname" v-model="form.shopname" placeholder="请输入" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">登录密码</view>
					<input class="uni-input" type="password" name="password" v-model="form.password" placeholder="请输入密码"/>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">类目选择</view>
					<!-- <input class="uni-input" name="clazz" placeholder="请输入"/> -->
					<view class="uni-input" style="padding:0;">
						<uni-data-select v-model="form.clazz" name="clazz" :localdata="clazzList"></uni-data-select>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">产品数量</view>
					<input class="uni-input" v-model="form.productnum" name="productnum" placeholder="请输入" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">公司资质上传</view>
					<view class="company_qualification upload_list">
						<view class="upload" v-for="(company_qualification,index) in company_qualification_list" :key="index">
							<image :src="$wanlshop.oss(company_qualification, 100, 100)" mode="widthFix" class="img"></image>
							<image src="../../static/images/remove_icon.png" mode="widthFix" class="remove_icon" @tap="removeImg(company_qualification_list,index)"></image>
						</view>
						<view class="upload"  v-if="company_qualification_list.length < 3" @click="upload(company_qualification_list)">
							<image src="../../static/images/add_icon.png" mode="widthFix" class="add_icon"></image>
							<text class="upload_text">上传</text>
						</view>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">品牌资质上传</view>
					<view class="brand_qualification upload_list">
						<view class="upload" v-for="(brand_qualification,index) in brand_qualification_list" :key="index">
							<image :src="$wanlshop.oss(brand_qualification, 100, 100)" mode="widthFix" class="img"></image>
							<image src="../../static/images/remove_icon.png" mode="widthFix" class="remove_icon" @tap="removeImg(brand_qualification_list,index)"></image>
						</view>
						<view class="upload"  v-if="brand_qualification_list.length < 1" @click="upload(brand_qualification_list)">
							<image src="../../static/images/add_icon.png" mode="widthFix" class="add_icon"></image>
							<text class="upload_text">上传</text>
						</view>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">产品资质上传</view>
					<view class="product_qualification upload_list">
						<view class="upload" v-for="(product_qualification,index) in product_qualification_list" :key="index">
							<image :src="$wanlshop.oss(product_qualification, 100, 100)" mode="widthFix" class="img"></image>
							<image src="../../static/images/remove_icon.png" mode="widthFix" class="remove_icon" @tap="removeImg(product_qualification_list,index)"></image>
						</view>
						<view class="upload"  v-if="product_qualification_list.length < 1" @click="upload(product_qualification_list)">
							<image src="../../static/images/add_icon.png" mode="widthFix" class="add_icon"></image>
							<text class="upload_text">上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-btn-v" style="margin-top: 80rpx;">
				<button form-type="submit" class="next-btn" :disabled="disabled">{{step == '1' ? '下一步' : '提交'}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	export default {
		data() {
			return {
				address:'',
				bioLength: 0,
				bioMaxLength: 200,
				step: '1',
				company_qualification_list:[],
				brand_qualification_list:[],
				product_qualification_list:[],
				
				categoryList:[],
				form:{
					state:'',
					name:'',
					corporation:'',
					mobile:'',
					supplier_phone:'',
					address_detail:'',
					password:'',
					bio:'',
					shopname:'',
					clazz:'',
					productnum:''
				}
			}
		},
		onLoad() {
			this.getDetail()
		},
		onShow() {
			this.getCategory()
		},
		computed: {
			...mapState(['common', 'user', 'update']),
			clazzList(){
				if(this.common.modulesData.categoryModules) {
					return this.common.modulesData.categoryModules.map(d=>{
						return {text:d.name,value:d.id}
					})
				}else {
					return []
				}
			},
			disabled(){
				return this.form.verify == 2 || this.form.verify == 3 ? true :false
			}
		},
		methods: {
			getDetail(){
				uni.request({
					url: '/wanlshop/entry/detail',
					method: 'GET',
					success: res => {
						console.log(res);
						let form = res.data.row || {}
						this.form = form
						this.form.clazz = form.clazz ? Number(form.clazz) : form.clazz
						this.address = form.address
						this.bioLength = form.bio ? form.bio.length : 0
						this.company_qualification_list = form.company_qualification ? form.company_qualification.split(",") : []
						this.brand_qualification_list = form.brand_qualification ? form.brand_qualification.split(",") : []
						this.product_qualification_list = form.product_qualification ? form.product_qualification.split(",") : []
						// verify: 0=提交资质,1=提交店铺,2=提交审核,3=通过,4=未通过
						if(form.verify == 3){
							uni.showModal({
								title:'已申请商家',
								showCancel:false,
								success: function (res) {
									uni.navigateBack()
								}
							})
						}else if(form.verify == 2) {
							uni.showModal({
								title:'入驻审核中',
								showCancel:false,
								success: function (res) {
									uni.navigateBack()
								}
							})
						}else if(form.verify == 4) {
							uni.showModal({
								title:'审核不通过',
								content: form.refuse,
								showCancel:false
							})
						} else {
							return
						}
					}
				})
			},
			getCategory(){
				uni.request({
					url: '/wanlshop/common/category',
					method: 'GET',
					data: {
						page: 1
					},
					success: res => {
						console.log(res);
						this.categoryList = res.data.data
					}
				})
			},
			getAddress(){
				if(this.disabled) {
					return
				}
				let that = this
				console.log('获取地址1');
				uni.getLocation({
				    type: "wgs84",
				    success (res) {
						console.log('获取地址2',res);
				        uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success: function(data){
								console.log('获取地址3',data);
								that.address = data.address
							},
							fail(err){
								console.log(err);
							}
						})
				    },
					fail(err){
						console.log(err);
					}
				})
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var formdata = e.detail.value
				// if(this.step === '1'){
				// 	this.step = '2'
				// }else {
				// 	uni.showModal({
				// 		content: '表单数据内容：' + JSON.stringify(formdata),
				// 		showCancel: false
				// 	});
				// }
				uni.request({
					url: '/wanlshop/entry',
					method: 'POST',
					data:{
						...formdata,
						step:this.step,
						address: formdata.address_detail ? (formdata.address + formdata.address_detail) : formdata.address,
						company_qualification:this.company_qualification_list.join(),
						brand_qualification:this.brand_qualification_list.join(),
						product_qualification:this.product_qualification_list.join(),
						clazz:this.form.clazz
					},
					success: res => {
						if(this.step === '1'){
							this.step = '2'
						}else {
							uni.showToast({
								title:res.msg
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
							// uni.showModal({
							// 	content: '表单数据内容：' + JSON.stringify(formdata),
							// 	showCancel: false
							// });
						}
					}
				});
			},
			bioInput(event){
				this.bioLength = event.detail.value.length
			},
			removeImg(list,index){
				list.splice(index, 1)
			},
			upload(list){
				uni.chooseImage({
					success: res => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								uni.uploadFile({
									url: updata.data.uploadurl,
									filePath: res.tempFilePaths[0],
									name: 'file',
									formData:updata.data.storage == 'local'? null: updata.data.multipart,
									success: data => {
										console.log("上传结果",data.data);
										list.push(JSON.parse(data.data).data.url)
									},
									fail: error => {
										uni.showToast({title: JSON.parse(error.data).msg, icon: 'error', position: true});
									}
								});
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 26rpx 32rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #fff;
		overflow: scroll;
	}
	/* .uni-form-item .title {
		padding: 20rpx 0;
	} */
	.uni-form-item {
		margin-bottom: 20rpx;
	}
	.uni-form-item .title {
		height: 48rpx;
		line-height: 48rpx;
	}
	.uni-input {
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}
	
	.uni-textarea {
		height: 112rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 16rpx 20rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		width: 100%;
	}
	.gsxz {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}
	.gsxz .title {
		width: 160rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	.radio-label {
		margin-right: 20rpx;
	}
	.radiobox {
		vertical-align: 6rpx;
	}
	::v-deep radio .wx-radio-input{
		background-image: url('/static/images/checkbox.png');
		background-color: transparent !important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 32rpx;
		height: 32rpx;
		border-color: transparent !important;
		background-clip: content-box !important;
		box-sizing: content-box;
	}
	::v-deep .wx-radio-input.wx-radio-input-checked {
		background-image: url('/static/images/checkbox_checked.png');
		background-color: transparent !important;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 32rpx;
		height: 32rpx;
		border-color: transparent !important;
		background-clip: content-box !important;
		box-sizing: content-box;
	}
	::v-deep radio::before {
		content: '';
	}
	.uni-input-address {
		padding-right: 0rpx;
	}
	::v-deep .uni-select {
		border: none;
	}
	
	.address {
		position: relative;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding-right: 50rpx;
	}
	.address .icon-address {
		position: absolute;
		right: 20rpx;
		top: 50%;
		z-index: 1000;
		transform: translateY(-50%);
		width: 32rpx;
		height: 32rpx;
	}
	
	.upload_list {
		display: flex;
		gap: 20rpx;
	}
	.upload_list .upload {
		width: 216rpx;
		height: 216rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #F8F8F8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		position: relative;
	}
	.upload_list .upload .img {
		width: 100%;
		height: 100%;
	}
	.upload_list .upload .remove_icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.upload_list .upload .add_icon {
		width: 40rpx;
		height: 40rpx;
	}
	.upload_list .upload .upload_text {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 36rpx;
	}
	
	.next-btn {
		width: 100%;
		height: 96rpx;
		background: #EB5641;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
